@import (reference) "~ui/styles/config";
@import (reference) "~ui/styles/themes";


.modal-dialog-component {
	position: fixed;
	z-index: 10000;

	> div {
		display: flex;
		flex-flow: column nowrap;
		width: 45rem;
		min-height: 16rem;
		padding: 2rem;
		opacity: 1;
		animation: animFadeInTop .333s ease-out 0s 1 normal;

		.theme({
			.theme-color-and-background( @theme-modal-base-color, @theme-modal-base-background );
		});
	}

	&.fadeOut {
		z-index: 9999;

		> div {
			animation-direction: reverse;
		}

		> div * {
			animation-play-state: paused !important;
		}
	}

	.modal-body-component {
		position: static;
		flex: 1 0;
		padding: 0;

		i {
			.theme({
				.theme-mix-color( @theme-modal-body-icon-color, @theme-modal-base-background );
			});
		}
	}

	.modal-header-component {
		font-size: 2em;
		font-weight: lighter;
		margin-bottom: 1rem;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;

		.theme({
			.theme-mix-color( @theme-modal-header-color, @theme-modal-base-background );
		});
	}

	.modal-footer-component {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: flex-end;
		margin-top: 2rem;
	}
}
